<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  jquery放在body中:在页面加载的时候被执行 放在head中:在被调用时被执行  -->
    <script src="__JS__/jquery-1.8.3.js"></script>
</head>
<body>
文件: <input type="file" id="F">
<img src="" alt="" width="80" height="80" style="display: none">
<script>
    <!--    内容改变事件    -->
    $('#F').change(function () {
        // this：在js中，this用以指代当前对象，但是this随着程序进行，所处环境不同，也是会一直变化的
        // that: 单纯只是一个变量名
        // this会变，我们不想让他变怎么办？答：var that=this 将this指向that，这是var that = this 的核心思想
        var that = $(this);
        // this.files 是文件上传信息
        console.log(this.files[0])
        if (!this.files[0])
            return false;   // 当用户什么都没选的时候 停止当前操作
        // 当用户选择了文件
        // 通过模拟表单的方式，将 文件数据流 存放在模拟的表单中，再提交给服务器
        // 1.new FormData 创建表单对象
        var fd = new FormData;
        // 2.设置文件对象命名和文件名
        fd.append("img", this.files[0]);    // 文件对象命名
        fd.append("name", "老王");    // 文件命名
        // 执行ajax
        $.ajax({
            url: "<{:url('ajax_upload2')}>",
            type: 'post',    // 请求方式
            dataType: 'json',    // 服务端返回的数据类型
            data: fd,    // 表单对象
            success: function (data) {    // 成功的回调函数    data指文件上传成功控制器返回的json格式数据
                if (data.error == 0) {
                    // that.next 意思是 input标签下一个标签img标签语句
                    // prop() 方法设置或返回被选元素的属性和值      data.path指定接收到控制器返回的json数据中键（path）的值（存储路径）
                    // alert('__STR__/' + data.path)
                    that.next().show().prop("src", "__STR__/" + data.path)  // show()可以将img标签变为显示状态
                } else {
                    that.next().hide()  // 将img标签转为隐藏状态
                    alert(data.msg)
                }
            },
            processData: false, // 数据序列化
            contentType: false, // 头类型数据，默认是字符串数据，但提交的是文件是数据流
        })
    })
</script>
</body>
</html>